<template>
    <div>
        <div style="display: flex; align-items: center; padding: 10px; color: #fff">
            <span style="margin-right: 20px; font-weight: bold">气象风险等级预报</span>
            <span style="margin-right: 20px">|</span>
            <span style="display: flex; align-items: center">
                <span>山洪灾害气象风险预警</span>
            </span>
        </div>
        <div class="selection">
            <el-date-picker v-model="startTime" type="date" placeholder="选择日期时间" style="width:200px"
                value-format="yyyy-MM-dd" class="custom-select">
            </el-date-picker>
            <span style="font-size: 16px;color: white;margin: 0 10px">至</span>
            <el-date-picker v-model="endTime" type="date" placeholder="选择日期时间" style="width:200px"
                value-format="yyyy-MM-dd" class="custom-select">
            </el-date-picker>
            <el-button type="primary" @click="getPdf" style="font-size: 16px;color: white;margin: 0 10px">确定</el-button>

        </div>
        <!-- 表格 -->
        <div>
            <el-table class="product" :data="groupData" stripe style="width: 100%" :header-cell-style="headerCellStyle"
                :cell-style="cellStyle" :row-style="rowStyle" max-height="700px">
                <el-table-column prop="instalMent" label="发布单位" fixed="left" min-width="25%"></el-table-column>
                <el-table-column prop="productName" label="产品名称" min-width="25%"></el-table-column>
                <el-table-column prop="unit" label="产品期数" min-width="25%">
                </el-table-column>
                <el-table-column prop="time" label="产品发布时间" min-width="25%">
                </el-table-column>
                <el-table-column prop="filename" label="文件名" min-width="25%">
                </el-table-column>
                <el-table-column prop="operate" label="文件操作" min-width="30%">
                    <template v-slot="scope">
                        <el-button @click="getUrl(scope.row.filename)" type="info" size="small"
                            style="margin-left: 10px">查看</el-button>
                        <!-- <el-button type="primary" size="small" @click="getUrl(scope.row.filename)">下载</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
// 下载库
import { saveAs } from 'file-saver';
import Cookies from "js-cookie";
import { reqProducts, reqUrl } from '@/api/service_product'
import { baseURL } from "@/utils/request";
// 处理时间格式
import moment from 'moment';
export default {
    data() {
        return {
            //开始时间
            startTime: moment(new Date()).subtract(1, 'years').format('YYYY-MM-DD'),
            // 结束时间
            endTime: moment(new Date()).format('YYYY-MM-DD'),
            downloadUrl: '',
            jumpUrl: '',
            groupData: [],
            newNum: "",
            instalMentMap: {
                BFYM: "  雅安  ",
                BXMA: "  名山  ",
                BXTQ: "  天全  ",
                BXLS: "  庐山  ",
                BXBX: "  宝兴  ",
                BXRJ: "  荥经  ",
                BXHM: "  汉源  ",
                BXSM: "  石棉  ",
                BFDN: " 达州市 ",
                BXQX: "  渠县  ",
                BXDZ: "  大竹  ",
                BXKJ: "  开江  ",
                BXDX: "  达县  ",
                BXXH: "  宣汉  ",
                BXWY: "  万源  ",
            },
        };
    },
    methods: {
        headerCellStyle() {
            return {
                background: "#0c2340",
                color: "#fff",
            };
        },
        cellStyle() {
            return {
                background: "#05152e",
                color: "#fff",
            };
        },
        rowStyle() {
            return {
                height: "30px",
            };
        },

        // 获取区域代码
        getCountyCode(countyName) {
            for (const [code, name] of Object.entries(this.instalMentMap)) {
                if (name.trim() === countyName.trim()) {
                    return code;
                }
            }
            return null;
        },

        // 获取pdf
        async getPdf() {
            const county = Cookies.get('county');
            let CountyCode = this.getCountyCode(county);
            let res = await reqProducts(8, CountyCode, this.startTime, this.endTime)
            console.log('产品', res.data.data)
            // 遍历数据，根据classification分组
            this.groupData = res.data.data
                // .filter((item) => item.classification === parseInt(this.newNum))
                .map((item) => ({
                    instalMent: this.instalMentMap[item.countySign] || item.countySign,
                    productName: this.current,
                    unit: item.id,
                    time: item.date,
                    filename: item.fileName,
                }));

            console.log(this.groupData);
        },

        // 查看PDF
        async getUrl(filename) {

            let res = await reqUrl(filename)
            this.jumpUrl = res.data.data;
            console.log(this.jumpUrl);
            //新页面打开
            window.open(this.jumpUrl, "_blank");
        },
        // 下载PDF
        async downloadPDF(filename) {
            let res = await reqUrl(filename)
            this.downloadUrl = res.data.data;

            // 使用 fetch 请求获取 PDF 文件  
            fetch(this.downloadUrl)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.blob(); // 将 response 转换为 Blob  
                })
                .then(blob => {
                    saveAs(blob, 'downloaded-file.pdf'); // 使用 file-saver 保存文件  
                })
                .catch(error => {
                    console.error('There has been a problem with your fetch operation:', error);
                });
        },

    },
    mounted() {
        this.getPdf();
    },
};
</script>

<style scoped lang="scss">
.custom-select .el-input__inner,
.el-date-picker .el-input__inner {
    background-color: rgb(36, 54, 101) !important;
    color: white !important;
    font-weight: bold !important;
    border: 2px solid #fff !important;
}

::v-deep .el-table__body-wrapper {

    // 整个滚动条
    &::-webkit-scrollbar {
        width: 10px; // 纵向滚动条的宽度
        background: rgba(213, 215, 220, 0.3);

    }

    // 滚动条轨道
    &::-webkit-scrollbar-track {
        border: 5px solid white;
    }


}

// 滚动条的滑块
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #0c2340;
    border-radius: 2px;
}

// --------------------隐藏table gutter列和内容区右侧的空白 start
::v-deep .el-table th.gutter {
    display: none;
    width: 0
}

::v-deep .el-table colgroup col[name='gutter'] {
    display: none;
    width: 0;
}

// 这个样式不加的话内容哪里会缺一点，估计是因为滚动条哪里缺的没有补上
::v-deep .el-table__body {
    width: 100% !important;
}

// --------------------隐藏table gutter列和内容区右侧的空白 end把以上改成css

.selection {
    width: 100%;
    margin: 20px 0;
}
</style>